<template>
   <div class="category">
        <nav-bar class="category-nav">
            <div slot="center">商品分类</div>
        </nav-bar>
        <div class="container">
            <left-menu :menu="categories" @selectItem="selectItem"></left-menu>
            <scroll class="top-content" ref="scroll">
                <top-goods :topGoods="topGoods" @imgLoad="imgLoad"></top-goods>
                <tab-control ref="tabControl" @tabClick="tabClick" class="tab-control" :titles="['综合', '新品', '销量']"></tab-control>
                <good-list :goods="isShowGoods" @imgLoad="imgLoad2" class="goods"></good-list>
            </scroll>
        </div>
        
   </div>
   
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goodsList/GoodsList'

import LeftMenu from './childCategory/leftMenu.vue'
import TopGoods from './childCategory/topGoods.vue'

import {getCategory, getSubcategory, getCategoryDetail} from 'network/category'
import {itemListerMixin} from 'common/mixins'






export default {
  components: { 
    NavBar,
    LeftMenu,
    TopGoods,
    Scroll,
    TabControl,
    GoodList,
   },
   data() {
    return {
        categories: [],
        topGoods: [],
        currentIndex: null,
        goods: {
            'pop':[],
            'new': [],
            'sell': []
        },
        currentType: 'pop',
        // categoryData: []
        saveY: 0
        
    }
   },
   created() {
    this._getCategory()
    // console.log(this.categories[this.currentIndex])
    
        
   },
   destroyed() {
    // console.log('分类销毁')
   },
   activated() {
    this.$refs.scroll.scrollTo2(0, this.saveY, 0)
    this.refresh()
   
   },
   deactivated() {
    
    this.saveY = this.$refs.scroll.scroll.y
    console.log('不活跃')
   },
   mounted() {

   },
   mixins: [itemListerMixin],
   methods: {
    _getCategory() {
            getCategory().then(res => {
            // console.log(res)
            this.categories = res.data.category.list

            // 2. 初始化数据
            // 老师方法，老是出现categoryGoods报错，undefined 已弃用
            // 而且下面goods商品也不加载，点击左边菜单切换两下才加载，始终未查明原因
            // for (let i = 0; i < this.categories.length; i++) {
            //     this.categoryData[i] = {
            //         categoryGoods : {
            //             'pop': [],
            //             'new': [],
            //             'sell': []
            //         }
            //     }
            // }

            // 打开页面请求第一个分类数据
            this.selectItem(0)

            
        })
    },
    // 根据左边点击菜单选项的索引号，请求对应的商品序号数据
    selectItem(index) {
        // 避免重复请求数据
        if (index === this.currentIndex) return

        // 让分类下面的tabcontrol选中回到第一个初始值
        this.$refs.tabControl.itemClick(0)
        
        this.currentIndex = index
        const maitKey = this.categories[index].maitKey
        // console.log(maitKey)
        getSubcategory(maitKey).then(res => {
            // console.log(res)
            // 直接赋值，会覆盖原来的数组
            this.topGoods = res.data.list 

            

        })
        // 优化狂抽
        this._getCategoryDetail('pop')
        this._getCategoryDetail('new')
        this._getCategoryDetail('sell')
        
        
        // console.log(miniWallkey)
            // getCategoryDetail(miniWallkey, 'pop').then(res => {
            //     // console.log(res)
            //     this.goods.pop = res
            // })
           
            // getCategoryDetail(miniWallkey, 'sell').then(res => {
            //     this.goods.sell.push(...res)
                 
            // })
            

    },
    _getCategoryDetail(type) {
        
        const miniWallkey = this.categories[this.currentIndex].miniWallkey
       
        getCategoryDetail(miniWallkey, type).then(res => {
            // console.log(res)
                this.goods[type] = res

            })
    },
    imgLoad() {
        // console.log(888)
        this.refresh()
    },
    imgLoad2() {
        this.refresh()
    },
    tabClick(index,item) {
        // console.log(item)
        switch(item) {
            case '综合':
                this.currentType = 'pop';
                break;
            case '新品':
                this.currentType = 'new';
                break;
            case '销量':
                this.currentType = 'sell'
        }
    }
   },
   computed: {
    isShowGoods() {
        return this.goods[this.currentType]
    }
   }
}
</script>


<style scoped>

.category{
    height: 100vh;
}

   .category-nav{
        color: #fff;
        background: var(--color-tint);
        position: relative;
        z-index: 9;
   }

   .container{
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    display: flex;
    overflow: hidden;
    
   }

   .top-content{
    flex: 1;
    /* height: calc(100% - 44px - 49px); */
    height: 100%;
    /* overflow: hidden; */
   }

   .tab-control{
    margin-top: 25px;
   }

   .top-content .goods{
    width: 275.15px;
   }

</style>